<template>
  <PageWrapper title="双控看板">
    <Row :gutter="[24, 24]">
      <Col :span="8">
        <Card title="我的">
          <Row :gutter="[24, 24]">
            <Col :span="8">
              <SvgIcon :name="`dynamic-avatar-${1}`" size="48"  class="svgIconStyle"/>
            </Col>
            <Col :span="8">
              <h2>排查任务完成率</h2>
            </Col>
            <Col :span="8">
              <h2>{{ calculateFileSize(mineRisk.checked/(mineRisk.toBeInvestigated + mineRisk.checked + mineRisk.anomalyExists)*100,['%']) }}</h2>
            </Col>
          </Row>
          <Row :gutter="[24, 24]">
            <Col :span="8">
              <SvgIcon :name="`dynamic-avatar-${2}`" size="48"  class="svgIconStyle"/>
            </Col>
            <Col :span="8">
              <h2>待排查任务</h2>
            </Col>
            <Col :span="8">
              <h2>{{ mineRisk.toBeInvestigated }}</h2>
            </Col>
          </Row>
          <Row :gutter="[24, 24]">
            <Col :span="8">
              <SvgIcon :name="`dynamic-avatar-${3}`" size="48"  class="svgIconStyle"/>
            </Col>
            <Col :span="8">
              <h2>待整改隐患</h2>
            </Col>
            <Col :span="8">
              <h2>{{ mineRisk.toBeRectified }}</h2>
            </Col>
          </Row>
          <Row :gutter="[24, 24]">
            <Col :span="8">
              <SvgIcon :name="`dynamic-avatar-${4}`" size="48"  class="svgIconStyle"/>
            </Col>
            <Col :span="8">
              <h2>待完成专项任务</h2>
            </Col>
            <Col :span="8">
              <h2>{{ mineRisk.toBeCompleted }}</h2>
            </Col>
          </Row>
          <Row :gutter="[24, 24]">
            <Col :span="8">
              <SvgIcon :name="`dynamic-avatar-${5}`" size="48"  class="svgIconStyle"/>
            </Col>
            <Col :span="8">
              <h2>待审批任务</h2>
            </Col>
            <Col :span="8">
              <h2>{{ mineRisk.pendingApproval }}</h2>
            </Col>
          </Row>
        </Card>
      </Col>
      <Col :span="8">
        <Card title="上周运行状况">
          上周运行状况
        </Card>
      </Col>
      <Col :span="8">
        <Card title="隐患整改提醒">
          <BasicTable
            titleHelpMessage="温馨提醒"
            :columns="columns"
            :dataSource="dangerInvestigationList"
            :canResize="canResize"
            :loading="loading"
            :striped="striped"
            :bordered="border"
            :pagination="pagination"
          >
          </BasicTable>
        </Card>
      </Col>
    </Row>
    
    <!-- 中间长条-->
    <Row :gutter="[24, 24]" style="margin-top: 1%;background-color:white">
      <Col :span="14" class="centreCol">
        <h2>任务完成情况</h2>
      </Col>
      <Col :span="10" class="centreCol">
        <a-button type="primary" class="ml-2" @click="changeTimeFrameType('thisWeek')"> 本周 </a-button>
        <a-button type="primary" class="ml-2" danger @click="changeTimeFrameType('today')"> 今日 </a-button>
        <a-button type="primary" class="ml-2" @click="changeTimeFrameType('lastWeek')"> 上周 </a-button>
      </Col>
      <Col :span="2">
        <SvgIcon :name="`dynamic-avatar-${6}`" size="48" class="svgIconStyle"/>
      </Col>
      <Col :span="2">
        <h2>应排查</h2>
        <a-button type="link"> {{ourEnterpriseRisk.checked + ourEnterpriseRisk.toBeInvestigated + ourEnterpriseRisk.anomalyExists}} </a-button>
      </Col>
      
      <Col :span="2">
        <SvgIcon :name="`dynamic-avatar-${5}`" size="48"  class="svgIconStyle"/>
      </Col>
      <Col :span="2">
        <h2>已排查</h2>
        <a-button type="link" @click="handleOpenBaseMeasuresTaskRecordTable('0')"> {{ourEnterpriseRisk.checked}} </a-button>
      </Col>
      
      <Col :span="2">
        <SvgIcon :name="`dynamic-avatar-${4}`" size="48"  class="svgIconStyle"/>
      </Col>
      <Col :span="2">
        <h2>待排查</h2>
        <a-button type="link" @click="handleOpenBaseMeasuresTaskRecordTable('2')"> {{ourEnterpriseRisk.toBeInvestigated}} </a-button>
      </Col>
      
      <Col :span="2">
        <SvgIcon :name="`dynamic-avatar-${3}`" size="48"  class="svgIconStyle"/>
      </Col>
      <Col :span="2">
        <h2>超期未排查</h2>
        <a-button type="link" @click="handleOpenBaseMeasuresTaskRecordTable('1')"> {{ourEnterpriseRisk.anomalyExists}} </a-button>
      </Col>
      
      <Col :span="3">
        <SvgIcon :name="`dynamic-avatar-${2}`" size="48"  class="svgIconStyle"/>
      </Col>
      <Col :span="3">
        <h2>排查完成率</h2>
        <h2>{{calculateFileSize((ourEnterpriseRisk.checked / ourEnterpriseRisk.shouldCheck)*100,['%']) }}</h2>
      </Col>
    </Row>
    
    <!-- bottom-->
    <Row :gutter="[24, 24]" style="margin-top: 1%;">
      <Col :span="12">
        <Card title="隐患治理">
          <commonBar :chartData="countForThisYearByMonthList" :unit="commonBarUnit" height="40vh" :option="{ title: { text: '年度隐患治理趋势', left: 'center' } }"  />
        </Card>
      </Col>
      <Col :span="12">
        <Card title="排查任务" :loading="loading">
          <pie :chartData="countTaskRecordForThisMonthList" height="40vh" :option="{ title: { text: '当月排查任务统计', left: 'center' } }" />
        </Card>
      </Col>
    </Row>
    <BaseMeasuresTaskRecordSelectModal ref="registerModal"></BaseMeasuresTaskRecordSelectModal>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref,onMounted, Ref} from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { Card, Row, Col, Spin } from 'ant-design-vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { SvgIcon } from '/@/components/Icon/index';
  import {queryCountForThisWeekTaskRecordByUsername,queryDangerInvestigationByUsername,queryCountForTimeFrame,queryCountForThisYearByMonth,queryCountTaskRecordForThisMonth} from './analysisData.api';
  import { useUserStore } from '/@/store/modules/user';
  import { calculateFileSize } from "/@/utils/common/compUtils";
  import { getBasicColumns } from './tableData';
  import { BasicTable } from '/@/components/Table';
  import BaseMeasuresTaskRecordSelectModal from './components/BaseMeasuresTaskRecordSelectModal.vue';
  import commonBar from '/@/components/chart/commonBar.vue';
  import Pie from '/@/components/chart/Pie.vue';

  export default defineComponent({
    name: 'index',
    components: { PageWrapper, Card, Row, Col, Spin,CollapseContainer,SvgIcon,BasicTable,BaseMeasuresTaskRecordSelectModal,commonBar,Pie },
    setup() {
      const canResize = ref(false);
      const loading = ref(false);
      const striped = ref(true);
      const border = ref(true);
      const pagination = ref<any>(false);
      const nodeType = ref<String>('today')
      const countThisWeekTaskRecord = ref<any>([]);
      const dangerInvestigationList = ref<any>([]);
      /* toBeInvestigatedList：待排查集合，checkedList：已排查集合，anomalyExistsList：超期未排查集合*/
      const toBeInvestigatedList = ref<any>([]);
      const checkedList = ref<any>([]);
      const anomalyExistsList = ref<any>([]);
      const countForThisYearByMonthList = ref<any>([]);
      const countTaskRecordForThisMonthList = ref<any>([])
      const userStore = useUserStore();
      const registerModal = ref();
      const commonBarUnit = "数量";
      /*toBeInvestigated待排查 checked已排查正常anomalyExists存在隐患 toBeRectified待整改隐患 toBeCompleted待完成专项任务 pendingApproval待审批*/
      const mineRisk = ref({
        toBeInvestigated: 0,
        checked: 0,
        anomalyExists: 0,
        toBeRectified: 0,
        toBeCompleted: 0,
        pendingApproval: 0,
      });
      const ourEnterpriseRisk = ref({
        shouldCheck: 0,
        toBeInvestigated: 0,
        checked: 0,
        anomalyExists: 0,
      });
      
      onMounted(() => {
        countForThisWeekTaskRecordByUsernameInit();
        countDangerInvestigationByUsernameInit();
        countForTimeFrameInit();
        countForThisYearByMonthInit();
        countTaskRecordForThisMonthInit();
      });
      
      async function countForThisWeekTaskRecordByUsernameInit(){
        await queryCountForThisWeekTaskRecordByUsername(userStore.getUserInfo.username)
          .then((responseResult) => {
            countThisWeekTaskRecord.value = responseResult
            if(countThisWeekTaskRecord.value.length > 0){
              countThisWeekTaskRecord.value.forEach(item =>{
                /* 0:正常1:存在隐患2:未巡检*/
                if(item.check_status == "0"){
                  mineRisk.value.checked = item.count;
                }else if(item.check_status == "1"){
                  mineRisk.value.anomalyExists = item.count;
                }else if(item.check_status == "2"){
                  mineRisk.value.toBeInvestigated = item.count;
                }
              })
            }
          })
      };
      async function countDangerInvestigationByUsernameInit(){
        await queryDangerInvestigationByUsername(userStore.getUserInfo.username,"0")
          .then((responseResult) => {
            dangerInvestigationList.value = responseResult
            mineRisk.value.toBeRectified = dangerInvestigationList.value.length
            //console.log("---------------------"+JSON.stringify(dangerInvestigationList.value))
          })
      };
      async function countForThisYearByMonthInit(){
        await queryCountForThisYearByMonth()
          .then((responseResult) => {
            countForThisYearByMonthList.value = responseResult
            // console.log("-------countForThisYearByMonthList--------------"+JSON.stringify(countForThisYearByMonthList.value))
          })
      };
      async function countTaskRecordForThisMonthInit(){
        await queryCountTaskRecordForThisMonth()
          .then((responseResult) => {
            countTaskRecordForThisMonthList.value = responseResult
            console.log("-------countTaskRecordForThisMonthList--------------"+JSON.stringify(countTaskRecordForThisMonthList.value))
          })
      };
      async function countForTimeFrameInit(){
        await queryCountForTimeFrame(nodeType.value)
          .then((responseResult) => {
            if(responseResult && responseResult.length >0){
              responseResult.forEach(item =>{
                ourEnterpriseRisk.value.shouldCheck ++;
                if(item.checkStatus == "0"){
                  ourEnterpriseRisk.value.checked ++;
                  checkedList.value.push(item);
                }else if(item.checkStatus == "1"){
                  ourEnterpriseRisk.value.anomalyExists ++
                  anomalyExistsList.value.push(item);
                }else if(item.checkStatus == "2"){
                  ourEnterpriseRisk.value.toBeInvestigated ++;
                  toBeInvestigatedList.value.push(item);
                }
              })
            }
            // console.log("-----checkedList----------------"+JSON.stringify(checkedList.value))
            // console.log("----anomalyExistsList----------------"+JSON.stringify(anomalyExistsList.value))
            // console.log("----toBeInvestigatedList---------------"+JSON.stringify(toBeInvestigatedList.value))
          })
      };
      function changeTimeFrameType(val){
        nodeType.value = val;
        countForTimeFrameInit();
      };
      function handleOpenBaseMeasuresTaskRecordTable(val: Recordable) {
        registerModal.value.edit({checkStatus:val,nodeType:nodeType.value});
       }
      return {
        mineRisk,
        ourEnterpriseRisk,
        userStore,
        calculateFileSize,
        canResize,
        loading,
        striped,
        border,
        pagination,
        nodeType,
        commonBarUnit,
        columns: getBasicColumns(),
        countThisWeekTaskRecord,
        dangerInvestigationList,
        toBeInvestigatedList,
        checkedList,
        anomalyExistsList,
        countForThisYearByMonthList,
        countTaskRecordForThisMonthList,
        countForThisWeekTaskRecordByUsernameInit,
        countDangerInvestigationByUsernameInit,
        countForTimeFrameInit,
        countForThisYearByMonthInit,
        countTaskRecordForThisMonthInit,
        changeTimeFrameType,
        handleOpenBaseMeasuresTaskRecordTable,
        registerModal,
      };
    },
  });
</script>

<style scoped>
  .col-demo-item {
    width: auto;
    margin-right: 1%;
  }
  .ml-2{
    float: right;
  }
  .centreCol{
    margin-top: 1%;
  }
  .svgIconStyle{
    float: right;
  }
</style>
